<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由的使用</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>Hello App!</h1>
			<p>
				<router-link to="/login">登陆</router-link>
				<router-link to="/register">注册</router-link>
			</p>
			<!-- 占位符-->
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript">
		//定义根组件
		//定义注册组件
		const register={template:'<h2>注册。。。。。</h2>'}
		//定义登陆组件
		const login={template:'<h2>登陆。。。。。</h2>'}
		//定义路由并且注册路由规则
		const routes=[
			//默认路径
			{path:'/',redirect:'/login'},
			{path:'/login',component:login},
			{path:'/register',component:register}
		]
		
		const router = new VueRouter({
			routes
		})

		//使用路由
		new Vue({
			el:'#app',
			router:router
		})
	</script>
</html>
